<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>商品搜索</title>
		
		<script src="${ctxStatic}/IDH/js/rem.js" type="text/javascript" charset="utf-8"></script>
    	<link rel="stylesheet" type="text/css" href="${ctxStatic}/IDH/css/reset.min.css" />
    	<link rel="stylesheet" type="text/css" href="${ctxStatic}/bootstrap=v3.3.0/dist/css/bootstrap.min.css" />
    	<link rel="stylesheet" href="${ctxStatic}/bootstrapValidator/dist/css/bootstrapValidator.min.css"/>
    	<link rel="stylesheet" type="text/css" href="${ctxStatic}/toastr/toastr.min.css" />
    	<link rel="stylesheet" type="text/css" href="${ctxStatic}/iconfont/iconfont.css">
    	<link rel="stylesheet" type="text/css" href="${ctxStatic}/IDH/css/head/head.css">
		<link rel="stylesheet" type="text/css" href="${ctxStatic}/IDH/css/goods/commodity_search.css" />
		
		<script src="${ctxStatic}/jquery/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
    	<script src="${ctxStatic}/bootstrap=v3.3.0/dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    	<script src="${ctxStatic}/toastr/toastr.min.js" type="text/javascript" charset="utf-8"></script>
    	<script src="${ctxStatic}/bootstrapValidator/dist/js/bootstrapValidator.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="${ctxStatic}/kkpager-master/src/kkpager.min.js"></script>
		<link rel="stylesheet" type="text/css" href="${ctxStatic}/kkpager-master/src/kkpager_blue.css" />
		
	</head>
	<body>
		<!-- pc 端头部 -->
		<header class="pc_dom hidden-xs">
			<input type="hidden" id="loginUserId" value="${user.id}"/>
			<div class="header container" style="padding-left:0;padding-right:0;">
				<div class="col-xs-12">
					<div class="row row_center">
						<div class="col-xs-3 header_logo" style="margin-left:10px;">
							<a href="#">
								<img style="width:100%;height:100%;" src="${ctxStatic}/IDH/images/JS MALL LOGO-01-01.png" />
							</a>
						</div>
						<div class="col-xs-4 header_nav">
							<ul class="hn_ul">
								<li>
									<a href="${ctxf}">公司首页</a>
								</li>
								<li>
									<a href="${ctxf}/front/index">商城首页</a>
								</li>
								<li>
									<a onclick="gotoJSLT()" style="cursor:pointer;">霁盛论坛</a>
								</li>
								<li>
									<a href="${ctxf}/front/product/genProduct/developmentBoard">开发板</a>
								</li>
								<li>
									<a href="${ctxf}/front/product/genProduct/parts">配件</a>
								</li>
							</ul>
						</div>
						<div class="col-xs-5 header_help">
							<div class="help_top">
								<ul class="hp_ul">
									<li>
										<a href="${ctxf}/list-1588f167d2e3428a82e73d683b81b182.html">帮助</a>
									</li>
									<li>
										<c:if test="${count != null}">
											<ul class="pc-nav" id="pc-nav">
										        <li>
										        	<a href="#"><span id="username">${user.username}</span><span class="caret"></span></a>
										            <ul class="pc-subnav">
										                <li><a href="${ctxf}/userfront/myAccount.html" >我的账户</a></li>
										                <li><a href="${ctxf}/userfront/toOrder" >我的订单</a></li>
										                <li><a href="${ctxf}/userfront/toAddress2">收货管理</a></li>
										                <li><a href="${ctxf}/logout">退出</a></li>
										            </ul>
										        </li>
										    </ul>
	                               		</c:if>
										<c:if test="${count == null}">
											<a href="${ctxf}/account/login.html">登录</a>
										</c:if>
									</li>
								</ul>
							</div>
							<div class="row help_bottom">
								<div class="col-xs-12">
									<div class="shopCar " onclick="addProductToCart();">
										<div class="btn btn-default btnCar">
											<a href="#"><i class="iconfont icon-gouwuche"></i>购物车</a>
										</div>
										<c:if test="${count != null && count != 0}">
                                         <div class="carNumber" id="countDiv">${count }</div>
                               			</c:if>
									</div>
									<div class="search row">
										<div class="v_search" id="search">
											<form id="searchForm" action="${ctxf}/front/product/genProduct/all" method="post">
												<input type="hidden" id="pageNo" name="pageNo" value="" />
												<div class="in_con">
													<i class="icon iconfont icon-sousuo"></i>
													<input type="text" id="name" name="name" value="" class="search_input ui-autocomplete-input" placeholder="" style="color:grey;" autocomplete="off" />
													<input class="search_b" id="search_b" type="button" onclick="changeAction()" value="搜&nbsp;索">
												</div>
											</form>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</header>
		<!-- phone 头部 -->
		<div class="mb_sb_search visible-xs-block">
			<div class="mb_go2pre"><i class="iconfont ">&#xe64f;</i></div>
			<form id="phoneSearchForm" class="mb_sb_form" action="${ctxf}/front/product/genProduct/all" method="post">
				<input type="hidden" id="pageNo" name="pageNo" value="" />
				<input type="text" id="name" name="name" value="" class="mb_input_search" placeholder="请输入商品名称" style="color:grey;" autofocus="autofocus" />
				<!-- <input class="mb_input_search" type="search" autofocus="autofocus" name="" title="" placeholder=""> -->
				<span class="glyphicon glyphicon-remove" id="phone-search-remove"></span>
				<div class="mb_sb_submit" onclick="phoneChangeAction()">搜索</div>
			</form>
		</div>
		<!--模态框 开始-->
		<div class="modal fade  bs-example-modal-md" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModal" aria-hidden="true">
			<div class="modal-dialog  bs-example-modal-md">
				<div class="modal-content">
					<div class="modal-header">
						<h4 class="modal-title">登录</h4>
					</div>
					<div class="modal-body clearfix">
						<form class="form-horizontal" action="" method="post" id="moadlLoginForm">
							<div class="col-lg-12">
								<div class="row">
									<div class="col-lg-10 center">
										<div class="form-group">
											<label class="col-lg-3 control-label">用户名</label>
											<div class="col-lg-9">
												<input type="text" class="form-control" id="username" name="username"  placeholder="请输入用户名" />
											</div>
										</div>
									</div>
									<div class="col-lg-10 center">
										<div class="form-group">
											<label class="col-lg-3 control-label">密码</label>
											<div class="col-lg-9">
												<input type="password" class="form-control" id="passWord" name="passWord" placeholder="请输入密码" autocomplete="off"/>
											</div>
										</div>
									</div>
									<div class="col-lg-10 center">
										<div class="form-group text-right">
											<a href="${ctxf}/account/register.html">注册 </a>  | <a href="${ctxf}/account/forgetPassword">忘记密码</a>
										</div>
									</div>
									<div class="col-lg-10 center">
										<div class="form-group">
											<div class="col-lg-6 col-xs-6">
												<button type="submit" class="btn btn-primary btn-option-primary col-lg-12 col-xs-12" id="moalLogin" onclick="doLogin();">登录</button>
											</div>
											<div class="col-lg-6 col-xs-6 pull-right">
												<button type="button" class="btn btn-default btn-option-default col-lg-12 col-xs-12" data-dismiss="modal">取消</button>
											</div>
										</div>
									</div>
									<div class="col-lg-10 center">
										<div class="form-group">
											<div class="Third_party_login">
												<div class="line"></div> 
												<div class="text">第三方登录</div> 
												<div class="line"></div>
											</div>
										</div>
									</div>
									<div class="col-lg-10 center">
										<div class="form-group">
											<div class="Third_party_login_logo clearfix">
											  <a class="pull-left" href="${ctxf}/weixinForLogin">
											 	<img src="${ctxStatic}/IDH/images/login/weixin.png"/>
											  </a>
											  <a class="pull-right" href="https://graph.qq.com/oauth/show?which=Login&display=pc&client_id=101370661&response_type=token&scope=all&redirect_uri=http://gainseng.com/jeesite/f/qqLogin">
											    <img src="${ctxStatic}/IDH/images/login/QQ.png"/>
											  </a>
											</div>
										</div>
									</div>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
		<!--模态框 结束-->
		<!--pc content start-->
		<section class="container content" id="container">
			<div class="col-xs-12">
				<div class="row">
					<p class="noneGoods ${(not empty page && empty  page.list) ? '': 'hide'}">抱歉！没有找到相关的宝贝。</p>
					<c:forEach items="${page.list }" var="genProduct">
						<a href="${ctxf}/front/product/genProduct/detail?id=${genProduct.id}">
							<div class="item col-lg-3 col-md-4 col-xs-6">
								<div class="box">
									<span class="commodityName">${genProduct.name }</span>
									<span class="commodityPrice">￥${genProduct.nowprice }</span>
									<p class="commodityDetail">${genProduct.introduce }</p>
									<div class="commodityImg text-center">
										<img src="${uploadPath }${genProduct.maxpicture }" />
									</div>
								</div>
							</div>
						</a>
					</c:forEach>
				</div>
			</div>
		</section>
		<section class="container ${empty  page.list ? 'hide': ''}">
			<div class="col-xs-12">
				<div class="row">
					<div id="kkpager"></div>
				</div>
			</div>
		</section>
		<!--pc content end-->
		<%@ include file="/WEB-INF/views/modules/marketFooter.jsp"%>
		
	</body>
	
	<script type="text/javascript">
		$(document).ready(function() {
			//生成分页控件  
			kkpager.generPageHtml({
				pno : '${page.pageNo}',
				mode : 'click', //设置为click模式
				total : '${page.last}',  //总页码  
				//总数据条数  
				totalRecords : '${page.count}',
				//点击页码、页码输入框跳转、以及首页、下一页等按钮都会调用click
				//适用于不刷新页面，比如ajax
				click : function(n){
					queryPage(n);
			        //处理完后可以手动条用selectPage进行页码选中切换
			        this.selectPage(n);
			    },
			    //getHref是在click模式下链接算法，一般不需要配置，默认代码如下
			    getHref : function(n){
			        return '#';
			    }
			});
			
			function queryPage(page) {
				$("#pageNo").val(page);
				$("#searchForm").attr("action","${ctxf}/front/product/genProduct/all")
				$("#searchForm").submit();
			}	
			
			/* var value = sessionStorage.getItem('key');
			var data = JSON.parse(value);
			if(data != null){
				$('.hn_ul li').eq(data.index).addClass('tabLi').siblings().removeClass('tabLi');
				$('.p_ul li').eq(data.index).addClass('p_ul_li_active').siblings().removeClass('p_ul_li_active');
			} */
			
			$('#moadlLoginForm').bootstrapValidator({  
				 message: 'This value is not valid',
			        feedbackIcons: {
			            valid: '',
			            invalid: '',
			            validating: ''
			        },
			        fields: {
				        'username': {
			                validators: {
			                    notEmpty: {
			                        message: '请输入用户名'
			                    },
			                    callback: {
									message: '用户名不存在',
									callback: function(value, validator) {
									return userName;
									}
								}
			                }
			            },
			            'passWord': {
			                validators: {
			                	notEmpty: {
			                        message: '请输入密码'
			                    },
			                   callback: {
									message: '密码错误请重试',
									callback: function(value, validator) {
									return passWord;
									}
								}
			                }
			            },
			        }
			}).on('success.form.bv', function (e) {
				e.preventDefault();
			});
		});
		
		function doLogin() {
			$.ajax({
				type: "POST",
				url: "${ctxf}/account/doLogin",
				dataType: "json",
				data: $('#moadlLoginForm').serialize(),
				async: true,
				success: function(data) {
					if(data.loginResult == "200"){
						toastr.success("登录成功！" , {timeOut:500});
						$("#buyAmt").val($(".num-input").val());
						$("#inputForm").submit();
						$('#loginModal').modal("hide");
						setTimeout(function(){
							window.location.href = "${ctxf}/front/cart/genCart";
						},1000);
					}else if(data.loginResult == "201"){
						userName = false;
						$('#moadlLoginForm').data('bootstrapValidator').updateStatus('username','NOT_VALIDATED',null).validateField('username');
					}else if(data.loginResult == "202"){
						passWord = false;
						$('#moadlLoginForm').data('bootstrapValidator').updateStatus('passWord','NOT_VALIDATED',null).validateField('passWord');
					}else if(data.loginResult == "204"){
						toastr.error("此账户已被禁用",{timeOut: 1000});
					}
				}
			});
		}
		
		//登录input change 事件
		$('#loginModal input').change(function(){
			if($(this).attr('name') == "username"){
				userName = true;
				$('#moadlLoginForm').data('bootstrapValidator').updateStatus('username','NOT_VALIDATED',null).validateField('username');
			}else {
				passWord = true;
				$('#moadlLoginForm').data('bootstrapValidator').updateStatus('passWord','NOT_VALIDATED',null).validateField('passWord');
			}
		})
		
		//pc
		/* $('.hn_ul li').click(function() {
			$(this).addClass('tabLi').siblings().removeClass('tabLi');
			var data = new Object;
			data.index = $(this).index();
			var str = JSON.stringify(data);
			if($('.hn_ul li').is('.tabLi')) {
				sessionStorage.setItem('key', str);
			}
		}); */
		
		//phone
		/* $('.p_ul li').click(function() {
			$(this).addClass('p_ul_li_active').siblings().removeClass('p_ul_li_active');
			var data = new Object;
			data.index = $(this).index();
			var str = JSON.stringify(data);
			if($('.p_ul li').is('.p_ul_li_active')) {
				sessionStorage.setItem('key', str);
			}
		}); */
		
		//phone按钮回车事件
		$(document).keydown(function(event){
	    	var e = event || window.event || arguments.callee.caller.arguments[0];
	    	if (e && e.keyCode == 13) { // enter 键
	    		if(document.activeElement.id == "name"){
	    			$("#search_b").click();
	    		}else if($("#loginModal").hasClass('in')){
	    			$("#moalLogin").click();
	    		}else{
	    			return false;
	    		}
	    	}	
	    });
		
		//pc 端搜索
		function changeAction(){
			$("#searchForm").attr("action","${ctxf}/front/product/genProduct/all");
			$("#searchForm").submit();
		}
		
		//phone端搜索
		function phoneChangeAction(){
			$("#phoneSearchForm").attr("action","${ctxf}/front/product/genProduct/all");
			$("#phoneSearchForm").submit();
		}
		
		//phone清除搜索框
		$("#phone-search-remove").click(function(){
			
			$(".mb_input_search").val("");
			
		});
		
		//phone返回按钮
		$(".mb_go2pre").click(function(){
			
			window.location.href = "${ctxf}/front/index";
			
		});
		
		/* 查看购物车 */
		function addProductToCart() {
			if ("" == $("#loginUserId").val()) {
				$('#loginModal').modal("show");
			}else{
				window.location.href = "${ctxf}/front/cart/genCart";
			}
		}
		
		function gotoJSLT() {
			var username = document.getElementById("username").innerText;
			if(username != null && username != "" && username != "undefined") {
				window.open("http://localhost:8080/otherLogin/"+username, "_blank");
			} else {
				window.open("/jeesite/f/account/login.html", "_self");
			}
		}
	</script>
</html>